<template>
	<view class="order-page" :style="{height:screenHeight+'px'}">
		
		<view class="order-head" id="head">
			<!-- <view class="search flex">
				<view class="search-input flex">
					<span class="search-icon sprite sprite-search"></span>
					<input type="text" v-model="searchKeyword" class="input font28 main-text-color" placeholder="输入商品名搜索">
				</view>
				<view class="search-btns flex font28" @click="searchOrder">搜索</view>
			</view> -->
			<view class="order-tabs">
				<v-tabs v-model="tabIndex"
					activeColor="#FD5052"
					color=" #222222"
					line-height="0" line-radius="0"
					field="label"
					:tabs="tabList" @change="changeTabHandle">
					<!-- <view class="tab-title" slot-scope="{ row }">
					  <text>{{ row.label }}</text>  
					</view> -->
				</v-tabs>
			</view>
		</view>
		<view class="order-body">
			<z-paging ref="paging" v-model="orderList" :show-scrollbar="false" @query="queryList">
				<order-list-item :list-data="orderList" 
					@go-to-pay="goToPay" 
					@apply-after="applyAfter" 
					@cancel="cancel" 
					@buy-once="buyOnce"></order-list-item>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	import orderListItem from '@/components/free-ui/order-list-item.vue';
	import zPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	
	export default {
		components:{
			freeNavBar,
			orderListItem,
			zPaging
		},		
		onLoad(e) {			
			if(e && e.status >= 0) {
				this.tabIndex = parseInt(e.status) + 1				
			}			
		},
		onShow() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight//获取当前页面的高度			
		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight -30;	
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 			
		},
		mixins: [ZPMixin],
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				screenHeight: 950,
				tabIndex: 0,
				tabList: [
					{label: '全部', value: ''},
					{label: '待付款', value: 0},
					{label: '待收货', value: 1},
					{label: '已完成', value: 2},
					{label: '已取消', value: 3}
				],
				scrollIntoXView: '',
				orderList: [],
				searchKeyword: '',
				selectStatus: 0,
				queryForm: {
					pageNo: 1,
					pageSize: 10
				},
				reTriggered: true
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.queryForm.pageSize = pageSize;
				this.queryForm.pageNo = pageNo;
				this.getOrderList(null,null);
			},
			goToOrderItemDetail(id) {
				uni.navigateTo({url: '/pages/mail/order-detail?orderItemId=' + id});
			},
			goToOrderDetail(orderId) {
				uni.navigateTo({url: '/pages/mail/order-detail?id=' + orderId});
			},
			goToPay(id) {
				if(id && id > 0) {
					uni.navigateTo({url: '/pages/mail/order-detail?id=' + id});
				}				
			},
			getOrderList(status, keyword) {
				let _this = this
				let params = {
					status: _this.tabList[this.tabIndex].value,
					keyword: _this.searchKeyword,
					pageNo: _this.queryForm.pageNo,
					pageSize: _this.queryForm.pageSize,
				};
				if(!this.isBlank(status) && status >= 0) {
					params.status = status
				}
				if(!this.isBlank(keyword)) {
					params.keyword = keyword;
				}				

				$H.get('/trade/order/get-order-list', params).then(res => {
					if(res) {
						// _this.orderList = res
						_this.$refs.paging.complete(res);
					}
				})
			},
			getYuanPrice(price) {
				return $U.fenToYuan(price);
			},
			isBlank(str) {
				if(str == 'null' || str == 'NULL' || str == 'undefined') {
					return true;
				}
				else if(str == 0) {
					return false;
				}
			    return (!str || /^\s*$/.test(str));
			},
			changeTabHandle(index) {
				this.tabIndex = index
				this.getOrderList(this.tabList[index].value, this.searchKeyword);
			},
			searchOrder() {
				if(this.searchKeyword) {
					this.queryForm.pageNo = 1;
					this.getOrderList(null, this.searchKeyword);
				}
				else {
					uni.showToast({
						title: '请输入查询关键词',
						icon: 'none'
					});
				}
			},
			applyAfter(orderItemId) {
				uni.navigateTo({url: '/pages/my/add-after-sale?orderId=' + orderItemId});
			},
			cancel(id) {
				let _this = this;
				$H.post('/trade/order/cancel',{id}).then(res => {
					if(res) {
						_this.tabIndex = 4;
						_this.queryList(1, _this.queryForm.pageSize);
					}
				})
			},
			buyOnce(id) {
				uni.navigateTo({url: '/pages/index/product-detail?pid=' + id});
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-page {
	position: relative;
	float: left;
	width: 100%;
	.order-head {
		background: #FFFFFF;
		padding: 0;
		.search {
			height: 60rpx;
			border-radius: 200px;
			background: #F3F3F3;
			justify-content: space-between;
			padding-left: 30rpx;
			
			.search-input {
				padding: 12rpx 0;
				align-items: center;
				flex: 1;
				padding-right: 10rpx;
			}
			
			.search-icon {
				display: block;
				margin-right: 14rpx;
			}
			
			.input {
				display: block;
				width: 100%;
			}
			.search-btns {
				width: 112rpx;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #E6E6E6;
				color: #FD5052;
			}
		}
		.order-tabs {
			position: relative;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			/deep/ .v-tabs__container-item {
				width: auto;
				min-width: 14%;
				justify-content: center !important;
			}
		}
	}
	.order-body {
		position: relative;
		width: 100%;		
		background-color: #F3F3F3;
		/deep/ .z-paging-content-fixed {
			top: 72rpx;
		}
		.scroll-box-y {
			width: 100%;
			height: 950rpx;
			position: relative;
			box-sizing: border-box;			
			white-space: nowrap;
			padding-top: 12rpx;
			.order-list {	
				position: relative;
				height: 950rpx;
				width: 100%;
				float: left;
				align-items: center;
				justify-content: flex-start;
				/deep/ .uni-list {
					background-color: #F3F3F3;					
				}
				/deep/ .uni-list-item {
					height: 350rpx;
				}
				/deep/ .uni-list-item .uni-list-item__container {
					height: 330rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					display: block;
				}
				.item-head {
					position: relative;
					width: 100%;
					height: 80rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					.item-title {
						position: relative;
						width: 75%;
						float: left;
						text-align: left;
						color: #222222;
						font-weight: 400;
						font-size: 28rpx;
						font-style: normal;
						text-transform: none;
						overflow: hidden; 
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.item-status {
						position: relative;
						width: 24%;
						float: left;
						text-align: right;
						font-weight: 400;
						font-size: 26rpx;
						font-style: normal;
						text-transform: none;
					}
				}
				.item-body {
					position: relative;
					width: 100%;
					height: 190rpx;
					.item-iamges {
						position: relative;
						width: 100%;
						display: flex;
						box-sizing: border-box;
						overflow: hidden;
						.item-img-box {
							width: 560rpx;
							height: 140rpx;
							.spu-img-not-pay {
								width: 140rpx;
								height: 140rpx;
								float: left;
								background: #fff;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
							}
						}
						.item-price-not-pay {
							position: relative;
							width: 100rpx;
							height: 160rpx;
							float: right;
							font-weight: bold;
							font-size: 34rpx;
							color: #000000;
							line-height: 100rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.item-desc {
						position: relative;
						width: 100%;
						display: flex;
						.spu-img {
							position: relative;
							width: 140rpx;
							height: 140rpx;
							float: left;
							background: #A55454;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
						.item-detail {
							position: relative;
							width: 440rpx;
							height: 140rpx;
							.spu-title {
								position: relative;
								width: 100%;
								height: 70rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.spu-sku {
								position: relative;
								width: 100%;
								height: 70rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;	
								font-style: normal;
								text-transform: none;
							}
						}
						.item-price {
							position: relative;
							width: 100rpx;
							height: 160rpx;
							float: left;
							font-weight: bold;
							font-size: 34rpx;
							color: #000000;
							line-height: 100rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}
				.item-footer {
					position: relative;
					width: 100%;
					height: 70rpx;
					.order-btn {
						position: relative;
						width: 20%;
						height: 50rpx;
						line-height: 50rpx;
						float: right;
						top: 10rpx;
						text-align: center;
						border: 1rpx solid;
						border-radius: 25rpx;
						margin: 0 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
}
</style>
